<template>
  <div class="addEmployee">
      <div class="header">
            <x-header :left-options="{backText:'',showBack: true}">添加员工
                <!-- <span slot="overwrite-left" class="iconfont icon-fanhui back"></span> -->
            </x-header>
        </div>
        <div class="content">
            <div class="emloCell">
                <x-input title='姓 名' type="tel" is-type="china-name"  placeholder="请输入员工姓名" v-model="getName"></x-input>
            </div>
            <div class="border-cell emloCell">
                <x-input title='手机号' type="tel" is-type="china-mobile"   placeholder="请输入员工手机号" v-model="getPhone"></x-input>
            </div>
            <div class="emloCell">
                <x-input title='密 码' type="tel"  placeholder="请输入密码"  v-model="getPw"></x-input>
            </div>
        </div>
        <div class="submitButton submit" @click="submit">
            确认添加
        </div>
  </div>
</template>


<script>
import XHeader from 'vux/src/components/x-header/index.vue'
import Group   from 'vux/src/components/group/index.vue'
import XInput  from 'vux/src/components/x-input/index.vue'
export default {
    name:"addEmployee",
    components:{
        XHeader,
        XInput,
        Group
    },
    data(){
        return{
            getName     : '',
            getPhone    : '',
            getPw       : '',
            nameVer	    : /^[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*$/,
            phoneVer    : /^1(3|4|5|7|8)\d{9}$/,
            msg         : ['请完善未填信息','姓名格式错误','电话格式错误','添加成功','添加失败'],
            addUrl      : "/member/add",
        }
    },
    filters: {
        trim: function(value) {
            return value.replace(/\s+/g, "");
        }
    },
    methods:{
        submit(){
            var sta   = this.testVal();
            var _this = this;
            if( sta != 3){
                this.toastMsg(this.msg[sta],"warn");
            }else{
                _this.$http.post( _this.addUrl,{
                    account : _this.getPhone,
                    ralname : _this.getName,
                    pw      : _this.getPw
                }).then(function(res){
                    if(res.data.code == 1){
                        _this.toastMsg(_this.msg[3]);
                        _this.getName = _this.getPhone = _this.getPw = "";
                    }else{
                        _this.toastMsg(_this.msg[4]);
                    }
                });
            }
        },
        testVal(){
            this.getName  = this.formatVal(this.getName);
            this.getPhone = this.formatVal(this.getPhone);
            this.getPw    = this.formatVal(this.getPw);
            if( this.getName == "" || this.getPhone == "" || this.getPw == ""){
                return 0;
            }else{
                if( !this.nameVer.test(this.getName)){
                    return 1;
                }else if( !this.phoneVer.test(this.getPhone)){
                    return 2;
                }else{
                    return 3;
                }
            }
        },
        formatVal(val){
            return val.replace(/\s+/g,"");
        }
    }
}
</script>

<style scoped lang="less">
.addEmployee{
    margin-top: 50px;
    .content{
        background-color: white;
        margin-top: 10px;
        .emloCell{
            padding: 5px;
        }
        .border-cell{
            border-top: 1px #E4E4E4 solid;
            border-bottom: 1px #E4E4E4 solid;
        }
        input{
            text-align: center;
        }
    }
}
@media (max-width:360px) {
    html,body,div,p,input,span,textarea,a,h1,label,.weui-cells{
        font-size: 12px;
    }
    .submitButton{
    height: 40px !important;
    line-height: 40px !important;
  }
}
</style>
